<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>EaselJS Example: Using Stage.autoClear</title>

	<link href="assets/demoStyles.css" rel="stylesheet" type="text/css" />

	<script type="text/javascript" src="../src/easeljs/utils/UID.js"></script>
	<script type="text/javascript" src="../src/easeljs/geom/Matrix2D.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/DisplayObject.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Container.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Stage.js"></script>
	<script type="text/javascript" src="../src/easeljs/events/MouseEvent.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Shape.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Graphics.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/Ticker.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Text.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/BitmapAnimation.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/SpriteSheet.js"></script>
	<script type="text/javascript" src="../src/easeljs/geom/Rectangle.js"></script>

	<!-- We also provide hosted minified versions of all CreateJS libraries.
	  http://code.createjs.com -->

	<script>
	var canvas, stage, oldX=0;

	var imgSeq = new Image();		// The image for the sparkle animation
	var bmpAnim;						// The animated sparkle template to clone

	function init() {
		if (window.top != window) {
			document.getElementById("header").style.display = "none";
		}

		// create a new stage and point it at our canvas:
		canvas = document.getElementById("testCanvas");
		stage = new createjs.Stage(canvas);

		// load the sprite sheet image, and wait for it to complete before proceeding:
		imgSeq.onload = handleImageLoad;
		imgSeq.src = "assets/sparkle_21x23.png";
	}

	function handleImageLoad() {
		// attach mouse handlers directly to the source canvas.
		// better than calling from canvas tag for cross browser compatibility:
		stage.onMouseMove = moveCanvas;
		stage.onMouseDown = clickCanvas;

		// create a semi-opaque black rectangle that covers the full stage.
		// drawing this to stage each tick will cause the canvas to fade to black.
		var shape = new createjs.Shape(new createjs.Graphics().beginFill('#333').drawRect(0,0,canvas.width+1,canvas.height));
		shape.alpha = 0.35;
		stage.addChild(shape);

		// this prevents the stage from automatically clearing itself each tick.
		// in this demo, it results in the star trails, as the previous draws remain on screen.
		stage.autoClear = false;

		// define simple sprite sheet data specifying the image(s) to use, the size of the frames,
		// and the registration point of the frame
		// it will auto-calculate the number of frames from the image dimensions and loop them
		var data = {
			images: ["assets/sparkle_21x23.png"],
			frames: {width:21,height:23,regX:10,regY:11}
		}

		// set up an animation instance, which we will clone
		bmpAnim = new createjs.BitmapAnimation(new createjs.SpriteSheet(data));

		// start the tick and point it at the window so we can do some work before updating the stage:
		createjs.Ticker.addListener(window);
	}

	function tick() {
		var h = canvas.height;
		var w = canvas.width;

		// loop through all of the active sparkles on stage:
		var l = stage.getNumChildren();
		for (var i=l-1; i>0; i--) {
			var sparkle = stage.getChildAt(i);

			// apply gravity and friction
			sparkle.vY += 2;
			sparkle.vX *= 0.98;

			// update position, scale, and alpha:
			sparkle.x += sparkle.vX;
			sparkle.y += sparkle.vY;
			sparkle.alpha += sparkle.vA;


			// remove sparkles that are no longer visible or are stalled:
			if (sparkle.alpha <= 0 || sparkle.y>=h && sparkle.vY < 10) {
				stage.removeChildAt(i);
			}
			
			//bounce sparkles off the bottom
			if (sparkle.y > h) {
				sparkle.vY *= -(Math.random()*0.4+0.4);
				sparkle.y -= sparkle.y%h;
			}
			if (sparkle.x >= w || sparkle.x <= 0) { sparkle.vX *= -1; }
		}

		// draw the updates to stage
		stage.update();
	}

	// sparkle explosion
	function clickCanvas(evt) {
		addSparkles(Math.random()*100+100|0, evt.stageX, evt.stageY, 2, 0);
	}

	//sparkle trail
	function moveCanvas(evt) {
		addSparkles(Math.random()*2+1|0, evt.stageX, evt.stageY, 1, evt.stageX-oldX);
		oldX = evt.stageX;
	}

	function addSparkles(count, x, y, speed, velX) {
		//create the specified number of sparkles
		for (var i=0; i<count; i++) {
			// clone the original sparkle, so we don't need to set shared properties:
			var sparkle = bmpAnim.clone();

			// set display properties:
			sparkle.x = x;
			sparkle.y = y;
			sparkle.alpha = Math.random()*0.5+0.5;
			sparkle.scaleX = sparkle.scaleY = Math.random()+0.3;
			sparkle.compositeOperation = "lighter";

			// set up velocities:
			var a = Math.PI*2*Math.random();
			var v = (Math.random()-0.5)*30*speed;
			sparkle.vX = Math.cos(a)*v+velX;
			sparkle.vY = Math.sin(a)*v;
			sparkle.vA = -Math.random()*0.05-0.01; // alpha

			// start the animation on a random frame:
			sparkle.gotoAndPlay(Math.random()*sparkle.spriteSheet.getNumFrames()|0);

			// add to the display list:
			stage.addChild(sparkle);
		}
	}

	</script>
</head>

<body onload="init();">
	<!-- background isn't set to black to demonstrate how the darkening applies -->

	<header id="header" class="EaselJS">
	    <h1><span class="text-product">Easel<strong>JS</strong></span> Sparkles Demo (fade)</h1>
	    <p>Demo similar to sparkles.html showing <strong>Stage.autoClear</strong> set to false. Move your mouse and click on the stage. Note that the semi-opaque (alpha=0.25) black rectangle <strong>Shape</strong> is drawn over the existing graphics each frame, fading them back to black.
	    </p>
	</header>

	<div class="canvasHolder">
		<canvas id="testCanvas" width="960" height="400"></canvas>
	</div>
</body>
</html>
